<!--
Copyright 2015 Google Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<form name="ctrl.form"
      ng-submit="ctrl.deploy()"
      novalidate>
  <kd-help-section>
    <md-input-container class="md-block"
                        md-is-error="ctrl.isNameError()">
      <label>[[App name|Label 'App name', which appears as a placeholder in an empty input field on the deploy from settings page.]]</label>
      <div>
        <input ng-model="ctrl.name"
               name="name"
               namespace="ctrl.namespace"
               required
               ng-pattern="ctrl.namePattern"
               ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }"
               kd-unique-name
               md-maxlength="{{ctrl.nameMaxLength}}">
        <md-progress-linear class="kd-deploy-form-progress"
                            md-mode="indeterminate"
                            ng-class="{'kd-deploy-form-progress-show': ctrl.form.name.$pending}">
        </md-progress-linear>
        <ng-messages for="ctrl.form.name.$error"
                     role="alert"
                     multiple>
          <ng-message when="required">[[Application name is required.|Appears to tell the user that app name input on the deploy from settings page is required.]]</ng-message>
          <ng-message when="uniqueName">
            [[Replication controller or service with this name already exists within namespace.|Appears as warning when the user has typed in an app name that already exists. The text is followed by a specific namespace name.]]
            <i>{{ctrl.namespace}}</i>.
          </ng-message>
          <ng-message when="pattern">
            [[Application name must start with a lowercase letter and contain only lowercase letters, numbers, and '-' between words.|Appears when the app name input on the deploy from settings page does not match the expected pattern.]]
          </ng-message>
          <ng-message when="md-maxlength">
            {{::ctrl.i18n.MSG_DEPLOY_SETTINGS_APP_NAME_MAX_LENGTH_WARNING}}
          </ng-message>
        </ng-messages>
      </div>
    </md-input-container>

    <kd-user-help>
      {{::ctrl.i18n.MSG_DEPLOY_SETTINGS_APP_NAME_USER_HELP}}
      <a href="http://kubernetes.io/docs/user-guide/labels/"
         target="_blank"
         tabindex="-1">
        {{::ctrl.i18n.MSG_DEPLOY_SETTINGS_LEARN_MORE_ACTION}} <i class="material-icons">open_in_new</i>
      </a>
    </kd-user-help>
  </kd-help-section>

  <kd-help-section>
    <md-input-container class="md-block">
      <label>{{::ctrl.i18n.MSG_DEPLOY_SETTINGS_CONTAINER_IMAGE_LABEL}}</label>
      <input ng-model="ctrl.containerImage"
             name="containerImage"
             required
             ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }"
             kd-valid-imagereference
             invalid-image-error-message="ctrl.containerImageErrorMessage">
      <ng-messages for="ctrl.form.containerImage.$error"
                   role="alert"
                   multiple>
        <ng-message when="required">{{::ctrl.i18n.MSG_DEPLOY_SETTINGS_CONTAINER_IMAGE_REQUIRED_WARNING}}</ng-message>
        <ng-message when="validImageReference">
          {{::ctrl.i18n.MSG_DEPLOY_SETTINGS_CONTAINER_IMAGE_INVALID_WARNING}} {{ ctrl.containerImageErrorMessage }}
        </ng-message>
      </ng-messages>
    </md-input-container>
    <kd-user-help>
      {{::ctrl.i18n.MSG_DEPLOY_SETTINGS_CONTAINER_IMAGE_USER_HELP}}
      <a href="http://kubernetes.io/docs/user-guide/images/"
         target="_blank"
         tabindex="-1">
        {{::ctrl.i18n.MSG_DEPLOY_SETTINGS_LEARN_MORE_ACTION}} <i class="material-icons">open_in_new</i>
      </a>
    </kd-user-help>
  </kd-help-section>

  <kd-help-section>
    <md-input-container class="md-block">
      <label>{{::ctrl.i18n.MSG_DEPLOY_SETTINGS_NUMBER_OF_PODS_LABEL}}</label>
      <input ng-model="ctrl.replicas"
             type="number"
             required
             min="1"
             name="replicas"
             kd-validate="integer"
             kd-warn-threshold="100"
             kd-warn-threshold-bind="showWarning">
      <ng-messages for="ctrl.form.replicas.$error"
                   role="alert"
                   multiple>
        <ng-message when="required">{{::ctrl.i18n.MSG_DEPLOY_SETTINGS_NUMBER_OF_PODS_REQUIRED_WARNING}}</ng-message>
        <ng-message when="number, kdValidInteger">
          {{::ctrl.i18n.MSG_DEPLOY_SETTINGS_NUMBER_OF_PODS_INT_WARNING}}
        </ng-message>
        <ng-message when="min">{{::ctrl.i18n.MSG_DEPLOY_SETTINGS_NUMBER_OF_PODS_MIN_WARNING}}</ng-message>
      </ng-messages>
      <span class="kd-warn-threshold"
            ng-show="showWarning">
        {{::ctrl.i18n.MSG_DEPLOY_SETTINGS_NUMBER_OF_PODS_HIGH_WARNING}}
      </span>
    </md-input-container>
    <kd-user-help>
      {{::ctrl.i18n.MSG_DEPLOY_SETTINGS_NUMBER_OF_PODS_USER_HELP}}
      <a href="http://kubernetes.io/docs/user-guide/replication-controller/"
         target="_blank"
         tabindex="-1">
        {{::ctrl.i18n.MSG_DEPLOY_SETTINGS_LEARN_MORE_ACTION}} <i class="material-icons">open_in_new</i>
      </a>
    </kd-user-help>
  </kd-help-section>

  <kd-help-section>
    <kd-port-mappings port-mappings="ctrl.portMappings"
                      protocols="ctrl.protocols"
                      is-external="ctrl.isExternal">
    </kd-port-mappings>
    <kd-user-help>
      {{::ctrl.i18n.MSG_DEPLOY_SETTINGS_PORT_MAPPINGS_USER_HELP}}
      <span ng-if="ctrl.name">
        {{::ctrl.i18n.MSG_DEPLOY_SETTINGS_SERVICE_DNS_NAME_USER_HELP}} <span class="kd-emphasized">{{ctrl.name}}</span>.
      </span>
      <a href="http://kubernetes.io/docs/user-guide/services/"
         target="_blank"
         tabindex="-1">
        {{::ctrl.i18n.MSG_DEPLOY_SETTINGS_LEARN_MORE_ACTION}} <i class="material-icons">open_in_new</i>
      </a>
    </kd-user-help>
  </kd-help-section>

  <!-- advanced options -->
  <div ng-show="ctrl.isMoreOptionsEnabled()">
    <kd-help-section>
      <md-input-container>
        <label>{{::ctrl.i18n.MSG_DEPLOY_SETTINGS_DESCRIPTION_LABEL}}</label>
        <textarea ng-model="ctrl.description"></textarea>
      </md-input-container>
      <kd-user-help>
        {{::ctrl.i18n.MSG_DEPLOY_SETTINGS_DESCRIPTION_USER_HELP}}
      </kd-user-help>
    </kd-help-section>

    <kd-help-section>
      <div layout="column">
        <div class="kd-label-title md-body-2">{{::ctrl.i18n.MSG_DEPLOY_SETTINGS_LABELS_TITLE}}</div>
        <div layout="row"
             class="kd-label-header-row">
          <div flex="45">{{::ctrl.i18n.MSG_DEPLOY_SETTINGS_LABELS_KEY_LABEL}}</div>
          <div flex="5"></div>
          <div flex="40">{{::ctrl.i18n.MSG_DEPLOY_SETTINGS_LABELS_VALUE_LABEL}}</div>
        </div>
        <div ng-repeat="label in ctrl.labels">
          <kd-deploy-label layout="row"
                           flex="auto"
                           label="label"
                           labels="ctrl.labels">
          </kd-deploy-label>
        </div>
      </div>

      <kd-user-help>
        {{::ctrl.i18n.MSG_DEPLOY_SETTINGS_LABELS_USER_HELP}}
        <a href="http://kubernetes.io/docs/user-guide/labels/"
           target="_blank"
           tabindex="-1">
          {{::ctrl.i18n.MSG_DEPLOY_SETTINGS_LEARN_MORE_ACTION}} <i class="material-icons">open_in_new</i>
        </a>
      </kd-user-help>
    </kd-help-section>

    <kd-help-section>
      <md-input-container class="md-block">
        <label>{{::ctrl.i18n.MSG_DEPLOY_SETTINGS_NAMESPACE_LABEL}}</label>
        <md-select ng-model="ctrl.namespace"
                   ng-click="ctrl.resetImagePullSecret()"
                   required>
          <md-option ng-repeat="namespace in ctrl.namespaces"
                     ng-value="namespace">
            {{namespace}}
          </md-option>
          <md-option ng-click="ctrl.handleNamespaceDialog($event)">
            {{::ctrl.i18n.MSG_DEPLOY_SETTINGS_NAMESPACE_CREATE_ACTION}}
          </md-option>
        </md-select>
      </md-input-container>
      <kd-user-help>
        {{::ctrl.i18n.MSG_DEPLOY_SETTINGS_NAMESPACE_USER_HELP}}
        <a href="http://kubernetes.io/docs/admin/namespaces/"
           target="_blank"
           tabindex="-1">
          {{::ctrl.i18n.MSG_DEPLOY_SETTINGS_LEARN_MORE_ACTION}} <i class="material-icons">open_in_new</i>
        </a>
      </kd-user-help>
    </kd-help-section>

    <kd-help-section>
      <md-input-container class="md-block">
        <label>{{::ctrl.i18n.MSG_DEPLOY_SETTINGS_IMAGE_PULL_SECRET_LABEL}}</label>
        <md-select ng-model="ctrl.imagePullSecret"
                   ng-click="ctrl.getSecrets(ctrl.namespace)">
          <md-option ng-repeat="secret in ctrl.secrets"
                     ng-value="secret">
            {{secret}}
          </md-option>
          <md-option ng-click="ctrl.handleCreateSecretDialog($event)">
            {{::ctrl.i18n.MSG_DEPLOY_SETTINGS_IMAGE_PULL_SECRET_CREATE_ACTION}}
          </md-option>
        </md-select>
      </md-input-container>
      <kd-user-help>
        {{::ctrl.i18n.MSG_DEPLOY_SETTINGS_IMAGE_PULL_SECRET_USER_HELP}}
        <a href="http://kubernetes.io/docs/user-guide/secrets/"
           target="_blank"
           tabindex="-1">
          {{::ctrl.i18n.MSG_DEPLOY_SETTINGS_LEARN_MORE_ACTION}} <i class="material-icons">open_in_new</i>
        </a>
      </kd-user-help>
    </kd-help-section>

    <kd-help-section>
      <div layout="row">
        <md-input-container flex="auto">
          <label>{{::ctrl.i18n.MSG_DEPLOY_SETTINGS_CPU_REQUIREMENT_LABEL}}</label>
          <input ng-model="ctrl.cpuRequirement"
                 type="number"
                 name="cpuRequirement"
                 min="0">
          <ng-messages for="ctrl.form.cpuRequirement.$error"
                       role="alert"
                       multiple>
            <ng-message when="number">{{::ctrl.i18n.MSG_DEPLOY_SETTINGS_CPU_NOT_A_NUMBER_WARNING}}</ng-message>
            <ng-message when="min">{{::ctrl.i18n.MSG_DEPLOY_SETTINGS_CPU_NEGATIVE_WARNING}}</ng-message>
          </ng-messages>
        </md-input-container>
        <div flex="5"></div>
        <md-input-container flex="auto">
          <label>{{::ctrl.i18n.MSG_DEPLOY_SETTINGS_MEMORY_REQUIREMENT_LABEL}}</label>
          <input ng-model="ctrl.memoryRequirement"
                 type="number"
                 name="memoryRequirement"
                 min="0">
          <ng-messages for="ctrl.form.memoryRequirement.$error"
                       role="alert"
                       multiple>
            <ng-message when="number">{{::ctrl.i18n.MSG_DEPLOY_SETTINGS_MEMORY_NOT_A_NUMBER_WARNING}}</ng-message>
            <ng-message when="min">{{::ctrl.i18n.MSG_DEPLOY_SETTINGS_MEMORY_NEGATIVE_WARNING}}</ng-message>
          </ng-messages>
        </md-input-container>
      </div>
      <kd-user-help>
        {{::ctrl.i18n.MSG_DEPLOY_SETTINGS_CPU_MEM_USER_HELP}}
        <a href="http://kubernetes.io/docs/admin/limitrange/"
           target="_blank"
           tabindex="-1">
          {{::ctrl.i18n.MSG_DEPLOY_SETTINGS_LEARN_MORE_ACTION}} <i class="material-icons">open_in_new</i>
        </a>
      </kd-user-help>
    </kd-help-section>

    <kd-help-section>
      <div>
        <md-input-container class="md-block">
          <label>{{::ctrl.i18n.MSG_DEPLOY_SETTINGS_RUN_COMMAND_LABEL}}</label>
          <input ng-model="ctrl.containerCommand">
        </md-input-container>

        <md-input-container class="md-block">
          <label>{{::ctrl.i18n.MSG_DEPLOY_SETTINGS_RUN_COMMAND_ARGUMENTS_LABEL}}</label>
          <input ng-model="ctrl.containerCommandArgs">
        </md-input-container>
      </div>
      <kd-user-help>
        {{::ctrl.i18n.MSG_DEPLOY_SETTINGS_RUN_COMMAND_USER_HELP}}
        <a href="http://kubernetes.io/docs/user-guide/containers/"
           target="_blank"
           tabindex="-1">
          {{::ctrl.i18n.MSG_DEPLOY_SETTINGS_LEARN_MORE_ACTION}} <i class="material-icons">open_in_new</i>
        </a>
      </kd-user-help>
    </kd-help-section>

    <kd-help-section>
      <div class="md-block">
        <md-checkbox ng-model="ctrl.runAsPrivileged"
                     class="md-primary">
          {{::ctrl.i18n.MSG_DEPLOY_SETTINGS_RUN_AS_PRIVILEGED_LABEL}}
        </md-checkbox>
      </div>
      <kd-user-help>
        {{::ctrl.i18n.MSG_DEPLOY_SETTINGS_RUN_PRIVILEGED_USER_HELP}}
        <a href="http://kubernetes.io/docs/user-guide/pods/#privileged-mode-for-pod-containers"
           target="_blank"
           tabindex="-1">
          {{::ctrl.i18n.MSG_DEPLOY_SETTINGS_LEARN_MORE_ACTION}} <i class="material-icons">open_in_new</i>
        </a>
      </kd-user-help>
    </kd-help-section>

    <kd-help-section>
      <kd-environment-variables variables="ctrl.variables">
      </kd-environment-variables>
      <kd-user-help>
        {{::ctrl.i18n.MSG_DEPLOY_SETTINGS_ENV_VARIABLES_USER_HELP}}
        <a href="http://kubernetes.io/docs/user-guide/configuring-containers/#environment-variables-and-variable-expansion"
           target="_blank"
           tabindex="-1">
          {{::ctrl.i18n.MSG_DEPLOY_SETTINGS_LEARN_MORE_ACTION}} <i class="material-icons">open_in_new</i>
        </a>
      </kd-user-help>
    </kd-help-section>
  </div>

  <!-- show/hide advanced options toggle -->
  <md-button class="md-primary kd-deploy-moreoptions-button"
             type="button"
             ng-click="ctrl.switchMoreOptions()"
             ng-hide="ctrl.isMoreOptionsEnabled()">
    <md-icon>arrow_drop_down</md-icon>{{::ctrl.i18n.MSG_DEPLOY_SHOW_ADVANCED_ACTION}}
  </md-button>
  <md-button class="md-primary kd-deploy-moreoptions-button"
             type="button"
             ng-click="ctrl.switchMoreOptions()"
             ng-show="ctrl.isMoreOptionsEnabled()">
    <md-icon>arrow_drop_up</md-icon>{{::ctrl.i18n.MSG_DEPLOY_HIDE_ADVANCED_ACTION}}
  </md-button>

  <div></div>
  <md-button class="md-raised md-primary kd-deploy-submit-button"
             type="submit"
             ng-disabled="ctrl.isDeployDisabled()">
    {{::ctrl.i18n.MSG_DEPLOY_APP_DEPLOY_ACTION}}
  </md-button>
  <md-button class="md-raised kd-deploy-cancel-button"
             ng-click="ctrl.cancel()">
    {{::ctrl.i18n.MSG_DEPLOY_APP_CANCEL_ACTION}}
  </md-button>
</form>
